import React from 'react'
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native'
export default class MsgCell extends React.Component{

    constructor(props){
        super(props)
    }




    render(){

        const item = this.props.item;
        let isSend = false;
        if(item.fromuserid === this.props.userId){
            isSend = true
        }
        return (
            <View style={[styles.msgCell,isSend?styles.sendMsgCell:styles.receiveMsgCell]}>
                <Image style={styles.avatar} source={{uri:isSend?item.fromuseravatar:item.touseravatar}}/>
                <View style={[styles.textView,isSend?styles.sendTextView:styles.receiveTextView]}>
                    <Text style={styles.name}>{isSend?item.fromusername:item.fromusername}</Text>
                    <Text style={styles.content}>{item.content}</Text>
                </View>

            </View>
        )
    }


}



const styles = StyleSheet.create({
    msgCell:{
        paddingVertical: 10
    },
    receiveMsgCell:{
        flexDirection: 'row'
    },
    sendMsgCell:{
        flexDirection: 'row-reverse'
    },
    textView:{
        flex: 1,
        flexDirection:'column',
        justifyContent: 'space-around',
    },
    sendTextView:{
        alignItems: 'flex-end'
    },
    receiveTextView:{
        alignItems: 'flex-start'
    },
    avatar:{
        width: 50,
        height: 50,
        marginHorizontal: 10

    },
    name:{

    },
    content:{

    },
    time:{

    }

})